<template>
  <div class="box">
    <div class="echart">
      <div id="echart_left">
        <div class="spana">历史文物古迹: <span class="num">{{ data.list.lswwgjCnt }}</span> 处</div>
        <div class="spana">历史建筑:<span class="num">{{ data.list.lsjzCnt }}</span>处</div>
        <div class="spana">传统风貌建筑:<span class="num">{{ data.list.ctfmjzCnt }}</span>处</div>
        <div class="spana">历史风貌地:<span class="num">{{ data.list.lsfmdCnt }}</span>处</div>
        <div class="spana">非物质文化遗产:<span class="num">{{ data.list.fwzwhycCnt }}</span>处</div>
      </div>
      <div id="echart_right"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import * as echarts from "echarts";
import { cityStatistics } from "@/api/home/index";
let tablelist = "";
let data = reactive({
  arr: [],
  list: ""
});
//城市普查统计请求
onMounted(() => {
  cityStatistics().then((res) => {
    // console.log(res);
    tablelist = res.data;
    data.list = res.data;

    console.log(tablelist, "城市普查数据");
    // 使用for in循环遍历对象的属性
    for (let key in tablelist) {
      // 把属性名和属性值添加到option.series[0].data数组中
      if (key== 'ctfmjzCnt'||key=='fwzwhycCnt'||key=='lsfmdCnt'||key=='lsjzCnt'||key=='lswwgjCnt') {
          option.series[0].data.push({ name: key, value: tablelist[key] });
      }
    
    }
    mychart.setOption(option);
  });
  // echarts 图
  let mychart = echarts.init(document.querySelector("#echart_right"));
  // let data=leftBottomData;
  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      type: "scroll",
      orient: "vertical",

      left: 10,
      top: 50,
      bottom: 20,
      data: [],
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },

    title: {
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 18, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "80%"],
        center: ["50%", "50%"],
        type: "pie",
        data: [],
        label: {
          show: false, //指示线
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  };
  mychart.setOption(option);
});
</script>

<style scoped>
.box {
  height: 90%;
  color: white;
}

.echart {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

#echart_left {
  width: 60%;
  height: 100%;
  /* background-color: yellowgreen; */
  padding: 10px;
  box-sizing: border-box;
}

#echart_right {
  height: 270px;
  width: 130px;
}

.spana {
  font-size: 14px;
  height: 50px;
  display: flex;
  align-items: center;
}

.num {
  color: aqua;
}
</style>